// 定位记录

<template>
    <f7-page>
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>定位记录</f7-nav-title>
            <f7-nav-right>

            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <img class="engineeName-icon"
                 src="@/assets/img/sign/engineeName.png"
                 alt="">
            <span>{{engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <template v-if="positions.length > 0">
            <f7-list media-list
                     v-for="(position, index) in positions"
                     :key="index">
                <f7-list-item>
                    <p>{{position.monTitle}}</p>
                    <div class="list-item-content"
                         v-for="(month, monthIndex) in position.items"
                         :key="monthIndex">
                        <div class="content-left">
                            <span>{{month.dayTitle}}<span>日</span></span>
                            <i></i>
                        </div>
                        <div>
                            <div class="content-right"
                                 v-for="(day, dayIndex) in month.items"
                                 @click="fnDetail(day.CASE_ID)"
                                 :key="dayIndex">
                                <section>
                                    <label>{{day.AUDIT_TIME.split(' ')[1]}}</label>
                                    <span class="tag">{{day.STATUS == '2' ? '审核通过' : '审核不通过'}}</span>
                                </section>

                                <div class="grey">
                                    <section>
                                        <label>{{day.CREATE_USER_NAME}}</label>
                                        <span>
                                            <f7-icon f7="phone_fill"></f7-icon>{{day.createUserTel}}
                                        </span>
                                    </section>
                                    <p>
                                        <f7-icon f7="placemark_fill"></f7-icon>
                                        <span>{{day.ENGINEE_POSITION}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </f7-list-item>
            </f7-list>
        </template>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

export default class instance extends controller {
    onInit () {
        this.context.engineeId = this.$params.engineeId
    }
    mixin () {
        return {
            data () {
                return {
                    engineeInfo: {},
                    positions: []
                }
            },
            created () {
                this.$f7.preloader.show();
                this.$util.getPromise('/project/position/queryList', { engineeId: this.engineeId }).then(result => {
                    this.engineeInfo = result.parameters.engineeInfo
                    //前端倒序
                    this.positions = result.parameters.positions.reverse()
                    this.positions.forEach(item => {
                        if (item.items && Array.isArray(item.items) && item.items.length > 0) {
                            item.items.reverse()
                            item.items.forEach(time => {
                                if (time.items && Array.isArray(time.items) && time.items.length > 0) {
                                    time.items.reverse()
                                }
                            })
                        }
                    })
                    this.$f7.preloader.hide();
                })
            },
            methods: {
                fnDetail (caseId) {
                    this.$util.getPromise(`/workflow/getWorkflowArgs`, { formId: caseId }).then(result => {
                        this.$f7router.navigate(`/business/construction/enginee/positioning/detail?action=processView&appCode=positionCase&version=1&historyTaskId=${result.historyTaskId}&assigneeId=${result.assigneeId}`)
                    })
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

@{deep}.media-list {
    margin: 10px 0;

    .item-inner > p {
        margin: 10px 0;
    }
}

.list-item-content {
    display: flex;

    .content-left {
        flex-shrink: 0;
        display: flex;
        align-items: baseline;

        > span {
            font-size: 26px;
            color: #333;

            > span {
                font-size: 14px;
                color: #888;
                margin: 0 4px;
            }
        }

        > i {
            width: 15px;
            height: 15px;
            border-radius: 100%;
            border: 1px solid #3385ff;
            position: relative;
            &::after {
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: #3385ff;
                border-radius: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-44%, -55%);
            }
        }
    }

    .content-right {
        flex: 1;
        padding: 13px 0 0 15px;
        font-size: 14px;
        color: #888;
        margin-bottom: 15px;

        > section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .grey {
            background-color: #f7fafe;
            padding: 10px;
            border-radius: 4px;

            > section {
                display: flex;
                align-items: baseline;
                margin-bottom: 15px;

                label {
                    font-size: 18px;
                    color: #333;
                    margin-right: 15px;
                }

                > span {
                    color: #3385ff;

                    .f7-icons {
                        color: #929cb4;
                        margin: 0 4px 0 10px;
                        font-size: 14px;
                    }
                }
            }

            > p {
                margin: 0;
                display: flex;
                font-size: 14px;

                .f7-icons {
                    flex-shrink: 0;
                    font-size: 14px;
                    margin-right: 4px;
                    line-height: 26px;
                }

                > span {
                    line-height: 26px;
                }
            }
        }
    }
}

.engineeName-icon {
    width: 26px;
    vertical-align: middle;
    margin-right: 10px;
}
</style>
